<template>
  <div class='tinymce'>
    <div class="nav">
      <div class="content">
        <div class="left">
          <img src="../../assets/images/logo.jpg" alt @click="$router.push('/')">
        </div>
        <div class="right">
          <button class="button button--small" @click="keep">保存草稿</button>
          <button class="button button--small button--primary" @click="sumbit">提交审核</button>
          <div class="login-box">
            <img :src="this.img" alt>
            <!-- 个人中心 -->
            <div class="personal">
              <p class="name">{{this.user}}</p>
              <li @click="$router.push('/wz')" v-if="this.author == 2">我的文章</li>
              <li @click="$router.push('/sc')">我的收藏</li>
              <li @click="$router.push('/wd')">我的问答</li>
              <li @click="$router.push('/pl')">我的评论</li>
              <li @click="$router.push('/dy')">我的订阅</li>
              <li @click="$router.push('/ds')">我的打赏</li>
              <!-- <li>资料修改</li> -->
              <!-- <p class="goout" @click="goOut">退出登录</p> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text">
      <div class="text-box">
         <div class="input-box">
           <input  type="text"  placeholder="请输入文章标题" value="" v-model="title" >
         </div>
          <div class="list">
              <span>选择分类 :</span>
            <select   @change="changeID($event)" v-model="changelist" value ="0">
            <option :value="item.id" v-for="(item,index)  in Specialist" :key="index">{{item.title}}</option> 
          </select>
          </div>
         <!-- <div id="editorElem"  class="smeditor" ></div> -->
         <editor id='tinymce' v-model='tinymceHtml' :init='init' ></editor>
      </div>  
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from "@/common/Footer/Footer";
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import qs from "qs";
export default {
  name: 'tinymce',
  data () {
    return {
      changelist:0,
      title:'',
      content:'',
      img:"",
      user:'',
      author:'',
      Specialist:[],
      tinymceHtml: '',
      init: {
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/lightgray',
        height: 300,
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        branding: false
      }
    }
  },
  methods: {
    //保存草稿
    keep(){
      if( this.title.length<5||this.title.length>25) {
           alert('文章标题在5-25个字符之间')
           return;
      }
      if(this.tinymceHtml == ''){
        alert('文章内容不能为空')
        return;
      }
      let param = {
          content : this.tinymceHtml,
          category_id :this.changelist,
          member_id: this.getCookie("member_id"),
          title: this.title,
        };
        this.$axios
          .post("/api/App/User/News/publishtest", qs.stringify(param), {
            headers: { "Content-Type": "application/x-www-form-urlencoded" }
          })
          .then(res => {
            if(res.data.status == 1){
              alert('操作成功')
            } else if (res.data.status == 0) {
              alert('操作失败')
            } else {
              alert('网络异常')
            }
          });
    },
    //发布文章
    sumbit(){
     if( this.title.length<5||this.title.length>25) {
           alert('文章标题在5-25个字符之间')
           return;
      }
      if(this.tinymceHtml == ''){
        alert('文章内容不能为空')
        return;
      }
      let param = {
          content : this.tinymceHtml,
          category_id :this.changelist,
          member_id: this.getCookie("member_id"),
          title: this.title,
        };
        this.$axios
          .post("/api/App/User/News/publishtest", qs.stringify(param), {
            headers: { "Content-Type": "application/x-www-form-urlencoded" }
          })
          .then(res => {
            if(res.data.status == 1){
              alert('操作成功')
            } else if (res.data.status == 0) {
              alert('操作失败')
            } else {
              alert('网络异常')
            }
          });
    },
    //获取分类ID
    changeID($event){
      this.changelist = event.target.value;
      console.log(this.changelist)
    },
    //获取文章的分类
    getSpecialist(){
      this.$axios.get("api/App/User/News/get_category_list", {}).then(res => {
        this.Specialist = res.data.data.news_category;
        // console.log(this.allList);
      });
    }
  },
  mounted () {
    tinymce.init({});
    this.user = decodeURI(escape(this.getCookie("userName")));
      this.img = this.getCookie("nm_avatar");
  },
  created(){
  this.getSpecialist();
  },
  components: {
    Editor,
    Footer
    }
}
</script>
<style lang="scss" scoped>
.tinymce {
  width: 100%;
  margin-top: -60px;
  background: #f9fafd;
  .nav {
    height: 70px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.11);
    .content {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 60px;
        height: 60px;
        img {
          width: 60px;
          height: 60px;
        }
      }
      .right {
        display: flex;
        justify-content: space-around;
        align-items: center;
        button {
          background: transparent none repeat scroll 0 0;
          border: 1px solid rgba(0, 0, 0, 0.15);
          border-radius: 999em;
          box-sizing: border-box;
          color: rgba(0, 0, 0, 0.44);
          fill: rgba(0, 0, 0, 0.44);
          cursor: pointer;
          display: inline-block;
          font-feature-settings: "liga";
          font-size: 14px;
          height: 37px;
          line-height: 36px;
          letter-spacing: 0;
          padding: 0 16px;
          position: relative;
          text-align: center;
          white-space: nowrap;
          margin-right: 5px;
          outline: none;
        }
        .button--small {
          height: 32px;
          line-height: 31px;
          padding: 0 14px;
          font-size: 12px;
          &:hover {
            border-color: #ddd;
            color: #ddd;
          }
        }
        .button--primary {
          color: #5079b7;
          border-color: #5079b7;
          &:hover {
            background: #5079b7;
            color: #fff;
          }
        }
        .login-box {
          height: 70px;
          &:hover {
            // border-bottom: 3px solid red !important;
            .personal {
              display: block;
            }
          }
        }
        img {
          display: block;
          width: 30px;
          height: 30px;
          margin-top:20px;
          border-radius: 100%;
          margin-left: 10px;
        }
      }
    }
  }
  .text {
    margin-top: 60px;
    margin-bottom: 10px;
    .text-box {
      width: 1200px;
      padding: 20px;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
      margin: 0 auto;
      position: relative;
      .box{
        width: 20px;
        height: 47px;
        position: absolute;
        left: 0;
        top:74px;
        background: rgba(240,240,240, 1);
      }
      .input-box{
        width: 1020px;
        height: 60px;
        border: 1px solid #000;
        margin-bottom: 15px;
         input {
        width: 1000px;
        background-color: #fff;
        outline: none;
        border:none;
        // border-bottom:1px solid #fff;
        height: 50px;
        margin-top:5px;
        
      }  
      }
      
      input::-webkit-input-placeholder {
          font-size: 16px;
         
        }
        input:-moz-placeholder {
          font-size: 16px;
      
        }
        input:-ms-input-placeholder {   
          font-size: 16px;
         
        }
    }
  }
  .list{
    display: flex;
    justify-content:flex-start;
    width: 100%;
    height: 100px;
    span{
      display: block;
      height: 40px;
      margin-right: 15px;
      line-height: 40px;
    }
    select{
      width: 120px;
      height: 40px;
    }
  }
}

.personal {
  width: 100px;
  background: #fff;
  border-radius: 10px;
  position: absolute;
  top: 70px;
  right: 150px;
  display: none;
  li {
    width: 100%;
    list-style: none;
    margin-top: 3px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    cursor: pointer;
    &:hover {
      color: #5b90bc;
    }
  }
  .name {
    margin: 0;
    line-height: 1.8;
    border-bottom: 1px solid #eee;
    padding-bottom: 3px;
    margin-bottom: 10px;
  }
}
.smeditor .input-area {
  width: 100% !important;
  height: 400px !important;
}
</style>
